<template>
	<div id="container">
		<header>
			<van-nav-bar
			  title="鸥点详情"
			  left-text="返回"
			  left-arrow
			  @click-left="onClickLeft"			
			/>
		</header>
		<div id="content">
			<!-- oudian-show -->
			<div class="oudian-show">
				 <h2>当前鸥点(个)</h2>
				 <h1>50</h1>
				 <h3><van-icon name="balance-o" />  花鸥点</h3>
				 <h4><van-icon name="refund-o" />  赚鸥点</h4>
			</div>
			<!-- oudian-change -->
			<div class="oudian-change">
				<div class="oudian-cha2">
					<van-button type="default">全部鸥点</van-button>
					<van-button type="default">即将过期</van-button>
					<van-button type="default">使用记录</van-button>
					<van-button type="default">获取记录</van-button>
				</div>
				<div class="oudian-cha1">
					<h3>【其它】手机验证鸥点</h3>
					<h4>2019-11-01</h4>
					<h2>+50</h2>
				</div>
			</div>
			
			
			
			
		</div>
	</div>
</template>

<script>
	
	export default{
		name:'Oudian',
		methods:{
			onClickLeft(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	h1,h2,h3,h4{
		padding: 0;
		margin: 0;
	}
	#container{
		height: 100vh;
		background: #fff;
	}
	/* --------------------oudian-header----------------- */
	header .van-nav-bar{
		height:48px;
		background: #f65050;
	}
	header .van-nav-bar__title{
		font-size:18px;
		font-weight:600;
		font-family:"楷体";
		color:#fefafb;
	}
	.van-nav-bar__text,.van-nav-bar__arrow{
		color:#fefafb;
		font-size:16px;
	}
	header .van-nav-bar__text{
		font-family: "楷体";
		font-weight:500;
	}
	/* -------------------oudian-content-show------------ */

	.oudian-show{
		height: 138px;
		background:#f65050;
		overflow: hidden;
		position: relative;
	}
	.oudian-show h2,h1{
		color: #ffffff;
		font-weight: 500;
		font-family: "楷体";
	}
	.oudian-show h2{
		margin: 17px 0px 28px 42px;
		font-size: 15px;
	}
	.oudian-show h1{
		margin: 0px 0px 19px 42px;
		font-size:30px;
	}
	.oudian-show h3,h4{
		height:30px;
		width:95px;
		border: 1px solid #fff;
		text-align: center;
		line-height: 30px;
		font-family: "楷体";
		color: #fff;
		font-weight: 500;
		border-radius: 5px;
	}
	.oudian-show h3{
		position: absolute;
		top:20px;
		right:17px;
	}
	.oudian-show h4{
		position: absolute;
		top:70px;
		right:17px;
	}
	/* -------------------oudian-change--------------- */
	.oudian-cha2{
		height: 79px;
		background: #f4fdfa;
		padding-top: 16px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
	}
	.oudian-cha2 button{
		border: 1px solid #bebebe;
	}
	.oudian-cha1{
		position: relative;
	}
	.oudian-cha1 h3{
		font-size:15px;
		color:#5e5e5e;
		font-family:"楷体";
		margin:20px 0px 18px 21px;
	}
	.oudian-cha1 h4{
		font-size:12px;
		color:#5e5e5e;
		font-family:"宋体";
		margin-left:21px;
	}
	.oudian-cha1 h2{
		position: absolute;
		top:18px;
		right:33px;
		font-size: 15px;
		color: #c12204; 
	}
</style>

